<template>
	<view style="background-color: #EFEFEF;height: 100vh;overflow: auto;">
		<u-toast ref="uToast" />
		
		<scroll-view id="scrollview" scroll-y="true" :scroll-top="scrollTop" :style="fromUser.u_status!=3?'height:calc(100vh - 200rpx)':'height:100vh'">
			<view v-if="loading" class="tips_messgae">
				加载中...
			</view>
			<view @click="getData()" v-else-if="error" class="tips_messgae">
				加载失败，点我重试
			</view>
			<view v-else-if="store.message_content.length<=0" class="tips_messgae">暂无消息</view>
			<view v-else-if="end" class="tips_messgae">
				没有更多信息了
			</view>
	
			
				<view v-if="fromUser.u_status!=3" class="message_box" id="msglistview">
					
					<!-- <view class="message_time">4月4日 晚上14:00</view> -->
					
					<view class="message_item" v-for="(v,k) in store.message_content" :key="k">
						<view class="cen">
							<view class="icon">
								<image @click="jump" :data-uid="v.sendId" v-if="v.sendId==fromUser.u_id" :src="fromUser.u_icon"></image>
							</view>
							
							<view class="content" :class="v.sendId==sendUser.u_id?'align_right':''" >
								<view class="text" :class="vipInfo[v.sendId]"  v-if="v.type==1">{{ v.content }}</view>
								<view v-else>
									<image :src="v.content" @click="showIcon" :data-src="v.content" class="file_icon"></image>
								</view>
							</view>
							
							<view class="icon"  >
								
								<image v-if="v.sendId==sendUser.u_id" :src="sendUser.u_icon"></image>
							</view>
						</view>
					</view>
					
				</view>
				
				<view v-else class="message_box2"  id="msglistview">
					
					<view class="message_list" v-for="(v,k) in store.message_content" :key="k">
						<view class="name">{{ fromUser.u_nickname }}</view>
						<view class="time">{{ $u.timeFormat(v.time, 'y-m-d hh:MM') }}</view>
						<view class="content">{{ v.content }}</view>
					</view>
					
				</view>
				
			</scroll-view>
			<view v-if="fromUser.u_status!=3" style="height: 210rpx;"></view>
			<view v-if="fromUser.u_status!=3" class="send_box">
				<view class="send_item">
					<textarea v-model="content"></textarea>
					<view class="btn" @click="send()">发送</view>
				</view>
				<view class="send_item"  style="justify-content: flex-start;">
					<view @click="upload_file()" class="item">
						<!-- <u-upload style="width: 30rpx;height: 30rpx;" ref="uUpload" :action="action" :auto-upload="true" ></u-upload> -->
						<image src="../../static/image/xd1b89fab3-2668-4488-9ec3-9af3fc72dd97.png"></image>
					</view>
				</view>
			</view>
		
		<u-mask :show="imageShow" @click="imageShow = false">
			<view class='image'>
				<image :src="image"></image>
			</view>
		</u-mask>
	</view>
</template>
<!-- 黄色：#FFFFE0,红色：#FFFFE0 -->
<script>
import config from '../../static/js/config.js'
export default {
		data() {
			return {
				image:'',
				imageShow:false,
				scrollTop:0,
				id:null,
				data:[],
				loading:false,
				error:false,
				end:false,
				page:1,
				first:1,
				sendUser:{},
				fromUser:{},
				ws:null,
				content:'',
				action:config.url+'/upload?type=message',
				timer:null,
				vipInfo:{},
				time:0,
				scrollVal:'',
				store:null
			}
		},
		methods: {
			jump(e){
				console.log(e.currentTarget.dataset.uid)
				uni.redirectTo({
    				url: '/pages/user/userInfo?id='+e.currentTarget.dataset.uid
				})
			},
			showIcon(e){
				
				this.imageShow = true
				
				this.image = e.currentTarget.dataset.src
				// console.log(e.currentTarget.dataset.src)
			},
			upload_file(){
				/* 更改会员图标 */
				let that = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: that.action, //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            success: (uploadFileRes) => {
								let data=JSON.parse(uploadFileRes.data)
								
								if(data.code==1){
									let info={
										sendUser:this.sendUser,
										fromUser:this.fromUser
									}
									let content=data.src
									// 转图片路径
									uni.sendSocketMessage({data:JSON.stringify({type:'message',content:content,sendId:this.sendUser.u_id,fromId:this.fromUser.u_id,message_type:2,info:info})})
								}else{
									
									that.$refs.uToast.show({
										title: '发送失败',
										type: 'warning'
									})
									
								}
				            }
				        });
				    }
				})
			},
			scrollToBottom(t) {
			            let that = this
			            let query = uni.createSelectorQuery()
			            query.select('#scrollview').boundingClientRect()
			            query.select('#msglistview').boundingClientRect()
						// return;
			            query.exec((res) => {
			                if(res[1].height > res[0].height){
								if(that.$store.state.scroll){
									that.scrollTop = res[1].height - res[0].height+160
									
									that.scrollVal = that.scrollTop
								}
			                    
			                }
			            })
			        },
			getData(){
				
				if(this.loading){
					return false
				}	
				
				this.loading = true
				
				this.error = false
					
				let that = this
				
				this.$request({
					url:'/message/content',
					data:{page:that.page,id:that.id,first:that.first},
					method:'post',
					success(res){
						if(res.statusCode==200){
							
							if(res.data.code==1){
								
								for(var i in res.data.data.data){
									that.$store.state.message_content.unshift(res.data.data.data[i])
								}
								
								if(res.data.data.page>=res.data.data.allpage){
									that.end = true
								}else{
									that.page = res.data.data.page+1
								}
								
								that.time =  res.data.data.time
								
								if(that.first==1){
									if( (!res.data.data.sendUser || !res.data.data.fromUser) || res.data.data.fromUser.u_id==res.data.data.sendUser.u_id){
										uni.navigateBack({
											url: '/pages/message/message'
										})
									}
									that.sendUser = res.data.data.sendUser
									
									that.fromUser = res.data.data.fromUser
									
									that.vipInfo[that.sendUser.u_id]=''
									
									let color1=''
									
									if(res.data.data.sendUser.u_memberTime>that.time){
										color1='text_red'
									}
									
									if(res.data.data.sendUser.u_supremeTime>that.time){
										color1='text_color'
									
									}
									
									that.vipInfo[that.sendUser.u_id]=color1
									
									color1=''
									
									if(res.data.data.fromUser.u_memberTime>that.time){
										color1='text_red'
									}
									if(res.data.data.fromUser.u_supremeTime>that.time){
										color1='text_color'
									}
									
									that.vipInfo[that.fromUser.u_id]=color1
									
									uni.sendSocketMessage({data:JSON.stringify({type:'chatUser',chatId:that.id,sendId:that.sendUser.u_id})})
									
									uni.setNavigationBarTitle({
										title:that.fromUser.u_nickname
									})
									
									window.setTimeout(that.scrollToBottom,200)
								}else{
									// window.setTimeout(that.scrollTop = that.scrollVal,200)
								}
								
								that.first = 0
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
								
								that.error = true
							}
							
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
							
							that.error = true
						}
					},
					fail(err){
						that.$refs.uToast.show({
							title: '请求失败',
							type: 'warning'
						})
						
						that.error = true
					},
					complete(){
						that.loading = false
						
						uni.stopPullDownRefresh()
					}
				})
			},
			send(){
				// this.$store.state.num=this.$store.state.num+1
				if(this.content==''){
					return false
				}
				
				if(this.content.length>300){
					that.$refs.uToast.show({
						title: '您的输入字数超过已超过最大限制',
						type: 'warning'
					})
					
					return false
				}
				
				let info={
					sendUser:this.sendUser,
					fromUser:this.fromUser
				}
				
				uni.sendSocketMessage({data:JSON.stringify({type:'message',content:this.content,sendId:this.sendUser.u_id,fromId:this.fromUser.u_id,message_type:1,info:info})})
				
				this.content = ''
			}
		},
		onLoad(option){
			
			this.store = this.$store.state
			
			this.id = parseInt(option.id)
			
			if(this.id){
				this.getData()
				
				this.$store.state.message_content=[]
			}else{
				uni.navigateBack({
					url: '/pages/message/message'
				})
			}
			
			let index = this.$store.state.message_key.indexOf(this.id)
			
			if(index!=-1){
				
				// 清除消息红点
				
				let row= JSON.parse(JSON.stringify(this.$store.state.message_list[index]))
				
				console.log(row)
				
				this.$store.state.message_list.splice(index,1)
				
				this.$store.state.message_key.splice(index,1)
				
				row.num=0
				
				this.$store.state.message_list.unshift(row)
				
				this.$store.state.message_key.unshift(this.id)
			}
			
			let that = this
			
			this.timer = setInterval(that.scrollToBottom,500)
		},
		onPullDownRefresh(){
			if(this.end){
				
				uni.stopPullDownRefresh()
				
				return false
			}
			
			this.$store.state.scroll = false
			
			this.getData()
		},
		onUnload(){
			clearInterval(this.timer)
			
			let index = this.$store.state.message_key.indexOf(this.id)
			
			if(index!=-1){
				
				let row= JSON.parse(JSON.stringify(this.$store.state.message_list[index]))
				
				this.$store.state.message_list.splice(index,1)
				
				this.$store.state.message_key.splice(index,1)
				
				console.log(row)
				
				row.num=0
				
				this.$store.state.message_list.unshift(row)
				
				this.$store.state.message_key.unshift(this.id)
			}
		}
	}
</script>
<!-- 黄色：#FFFFE0,红色：#FFFFE0 -->
<style scoped>
	.text_red{
		color:red;
		background-color:#F4CFDE  !important;
	}
	.text_color{
		color:#FFAA10;
		background-color:#FFFFF0 !important;
	}
	.image{
		width:750rpx;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.image image{
		width:630rpx;
	}
	.file_icon{
		width:500rpx;
		height: 300rpx;
	}
	.message_box2{
		font-size: 30rpx;
		width: 750rpx;
		min-height: 90%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}
	.message_box2 .message_list{
		padding:20rpx;
		width:690rpx;
		margin-top:40rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.message_box2 .message_list:last-child{
		margin-bottom: 40rpx;
	}
	.message_box2 .message_list .time{
		color:#888888;
		font-size: 26rpx;
		margin:15rpx 0;
	}
	uni-textarea {
		height: 80rpx;
	}
	view.send_box{
		width:750rpx;
		/* min-height: 170rpx; */
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left:0;
	}
	view.send_box view.send_item{
		display: flex;
		justify-content: center;
		align-items: center;
		padding:10rpx 0;
	}
	view.send_box view.send_item .item,view.send_box view.send_item .item image{
		width:40rpx;
		height: 40rpx;
	}
	view.send_box view.send_item .item{
		margin:10rpx;
		margin-left:30rpx;
	}
	view.send_box view.send_item:first-child{
		border-bottom: 1px solid #EFEFEF;
	}
	view.send_box view.send_item .btn{
		width: 170rpx;
		height: 70rpx;
		background-color: #EA4389;
		color:#fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 80rpx;
	}
	view.send_box view.send_item textarea{
		/* min-height: 85rpx; */
		width:460rpx;
		padding: 10rpx 20rpx ;
		background-color: #EFEFEF;
		min-height: 40rpx;
		/* line-height: 65rpx; */
		max-height: 70rpx;
		margin-right: 40rpx;
		font-size: 26rpx;
	}
	
	view.message_time{
		text-align: center;
		color:#888;
		font-size: 28rpx;
		margin-top: 30rpx;
	}
	view.message_box{
		font-size: 32rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		min-height: 90%;
		justify-content:flex-end;
	}
	view.message_box view.message_item{
		width:750rpx;
		margin-top:30rpx;
	}
	view.message_box view.message_item .cen{
		width:710rpx;
		margin-left:20rpx;
		display: flex;
		justify-content: ;
		/* border:1px solid red; */
	}
	view.message_box view.message_item view.icon,view.message_box view.message_item view.icon image{
		width:80rpx;
		height: 80rpx;
	}
	view.message_box view.message_item view.icon{
		border-radius: 80rpx;
		overflow: hidden;
	}
	view.message_box view.message_item view.content{
		width:510rpx;
		margin:0 20rpx;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		
	}
	view.message_box view.message_item  view.align_right{
		justify-content: flex-end !important;
	}
	view.message_box view.message_item view.content .text{
		background-color: #fff;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		line-height:38rpx;
		font-size: 32rpx;
	}
</style>
